<template>
  <div class="homeMapWrapFirst">
    <div class="containerWrap" ref="mapScreenfull">
      <!--<div class="infoButtonFirst" :style="'top:'+type<9?'45px':'15px'">-->
      <div class="infoButtonFirst" >
        <i @click='goBack' v-show="!isFull" class="iconfont icon-fanhui" style="margin-right: 5px;"></i>
        <i @click='screenfullMap' class="iconfont icon-quanping2"></i>
      </div>
      <div v-show="type < 5||type==9" class="changeCompanyWrap" style="text-align: center;">
        <el-radio-group v-model="enterprisno" size="mini" @change="getareaList(parentId,enterprisno)">
          <span style="display: inline-block;">
            <el-radio-button :label="8888">全部</el-radio-button></span>
          <span class="companyInfoSty">{{totalareaCount}}</span>

          <span v-for="(item,index) in $store.state.companyInfos" :key="index">
            <span style="display: inline-block;">
              <el-radio-button :label="item.enterpriseNo">{{item.enterpriseName}}</el-radio-button></span>
            <span class="companyInfoSty">{{enterCount[index]}}</span>
          </span>
        </el-radio-group>
      </div>
      <div id="mapContainer"></div>
    </div>
  </div>
</template>

<script>


  export default {
    props: ["showImg", "mapInfo","type"],
    data () {
      return {
        map: "",
        iconFull: "iconfont icon-quanping",
        isFull: false,
        markers: [],
        ply: [],
        Plg: [],
        areaCountList: [],
        enterCount: [],
        enterprisno: 8888,
        totalareaCount: 0,
        parentId: "",

      }
    },
    mounted(){

      document.querySelector(".homeMapWrapFirst").style.height = document.querySelector(".imgMapWrap").clientHeight + "px"
      this.getHotMap()
    },
    created(){
//      this.getHotMap()

    },

    methods: {
      goBack(){
        this.$emit("changeImgShow")
      },
      getareaList(parentId, enterpriseNo){

        this.map.clearOverlays();
        this.deletePoint()
        this.parentId = parentId
        let formData={}
        if(this.type==2||this.type==4||this.type==9){
          formData={
            parentId: parentId,
            regionType: 1,
            enterpriseNo: enterpriseNo===8888 ? "":enterpriseNo,
            intervalDay:this.type==2?this.mapInfo.intervalDay1:this.type==4?this.mapInfo.intervalDay2:this.type==9?this.mapInfo.intervalDay3:""
          }
        }else if(this.type==7) {
          formData={
            areaType:0,
            parentId: parentId,
            regionType: 1,
            enterpriseNo: enterpriseNo===8888 ? "":enterpriseNo
          }
        }else {
          formData={
            parentId: parentId,
            regionType: 1,
            enterpriseNo: enterpriseNo===8888 ? "":enterpriseNo
          }
        }

        this.axios.post(process.env.API_HOST + '/statis/' + this.mapInfo.url, formData)
          .then(response => {
            const result = response.data
            if (result.code === 200 && result.result) {
              let arr = []
                if(result.result.list){
                  result.result.list.forEach(item => {
                    this.areaCountList.forEach(item1 => {
                      if (item.regionId == item1.id) {
                        arr.push({
                          ...item1,
                          count: item[this.mapInfo.objName]
                        })
                      }
                    })
                  })
                  if(!enterpriseNo){
                    this.enterCount=[]
                    this.totalareaCount=0
                    this.totalareaCount=result.result.totalSum
                    if(this.type==6){
                      this.totalareaCount =  result.result.revolveRate
                    }
                    if(result.result.enterpriseList&&result.result.enterpriseList.length>0){
                      result.result.enterpriseList.forEach(item=>{
                        this.enterCount.push(item[this.mapInfo.objName])
                      })
                    }
                  }
                }else if(result.result) {
                result.result.forEach(item => {
                  this.areaCountList.forEach(item1 => {
                    if (item.regionId == item1.id) {
                      arr.push({
                        ...item1,
                        count: item[this.mapInfo.objName]
                      })
                    }
                  })
                })
              }
              let content
              arr.forEach(item => {
                content = item.regionName + ":" + item.count
                this.showArea(JSON.parse(item.regionPoints))
                this.addLabel(item.lng, item.lat, content)
              })
                this.map.setViewport(this.ply.getPath())    //调整视野
                this.map.setZoom(13)

            }
          })
      },
      //全市百度提取区域经纬度
      getBoundaryDemo(parentId, enterpriseNo) {
        this.$store.state.districtData.forEach(item => {
          if (item.id == parentId) {  //调整区域视野
            this.showAreaCenter(JSON.parse(item.regionPoints))
          }
        })
        this.$emit("changeImgShow")
        this.axios.post(process.env.API_HOST + '/common/selectRegion', {parentId: parentId})
          .then(response => {
            const result = response.data
            if (result.code === 200) {
              this.areaCountList = result.result
              this.getareaList(parentId, enterpriseNo)
            }
          })
      },
      //百度提取区域经纬度
      showAreaCenter(areaPoints) {
        let _this = this, arr = []
        if (areaPoints && areaPoints.length > 2) {
          _this.map.clearOverlays();        //清除地图覆盖物
          areaPoints.forEach((item) => {
            arr.push(new BMap.Point(item.lng, item.lat))
          })
          //              Polyline  Polygon
          _this.ply = new BMap.Polyline(arr, {
            strokeColor: " white",    //边线颜色。
            fillColor: "#3975FE",      //填充颜色。当参数为空时，圆形将没有填充效果。
            strokeWeight: 1,       //边线的宽度，以像素为单位。
            strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
            fillOpacity: 0.1,      //填充的透明度，取值范围0 - 1。
            strokeStyle: 'solid' //边线的样式，solid或dashed。
          });  //创建多边形

          _this.map.addOverlay(_this.ply);  //添加覆盖物

        }
      },
      addLabel(lng, lat, cotent){
        let point = new BMap.Point(lng, lat);
        let label = new BMap.Label(cotent, {
          position: point,    // 指定文本标注所在的地理位置
          offset: new BMap.Size(-50, 0)    //设置文本偏移量
        });  // 创建文本标注对象
        label.setStyle({
          color: "white",
          fontSize: "14px",
          border: "0",
          height: "20px",
//          fontWeight: "bold",
          backgroundColor: "0.05", //文本标注背景颜色　
          lineHeight: "20px",
          fontFamily: "微软雅黑"
        });
        this.map.addOverlay(label);
      },
      //百度提取区域经纬度
      showArea(areaPoints) {
        let _this = this, arr = []
        if (areaPoints && areaPoints.length > 2) {
//          _this.map.clearOverlays();        //清除地图覆盖物
          areaPoints.forEach((item) => {
            arr.push(new BMap.Point(item.lng, item.lat))
          })
          //              Polyline  Polygon
          _this.Plg = new BMap.Polygon(arr, {
            strokeColor: "white",    //边线颜色。
            fillColor: "#3975FE",      //填充颜色。当参数为空时，圆形将没有填充效果。
            strokeWeight: 1,       //边线的宽度，以像素为单位。
            strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
            fillOpacity: 0.8,      //填充的透明度，取值范围0 - 1。
            strokeStyle: 'solid' //边线的样式，solid或dashed。
          });  //创建多边形

          _this.map.addOverlay(_this.Plg);  //添加覆盖物
//          _this.map.setViewport(_this.ply.getPath());    //调整视野

        }

      },
      //清除指定覆盖物
      deletePoint(){
        let allOverlay = this.map.getOverlays();

        for (var i = 0; i < allOverlay.length - 1; i++) {
            this.map.removeOverlay(allOverlay[i]);
//            return false;
        }
      },
      //百度提取区域经纬度
      getBoundary(name) {
        this.$emit("changeImgShow")
        let _this = this, bdary = new BMap.Boundary();
        bdary.get(name, function (rs) {       //获取行政区域
//            _this.map.clearOverlays();        //清除地图覆盖物
          _this.map.removeOverlay(_this.ply)  //清除指定的
//            _this.map.clearOverlays()   //清除所画
          var count = rs.boundaries.length; //行政区域的点有多少个
          for (var i = 0; i < count; i++) {
            _this.ply = new BMap.Polygon(rs.boundaries[i], {
              strokeWeight: 2,
              strokeColor: "#3975FE",
              fillColor: 'white',
              fillOpacity: 0.1
            }); //建立多边形覆盖物
            _this.map.addOverlay(_this.ply);  //添加覆盖物
            _this.map.setViewport(_this.ply.getPath());    //调整视野
            setTimeout(() => {
              _this.addClickHandler(name)

            }, 500)
          }
        });


      },

      screenfullMap(){
        if (this.iconFull == "iconfont icon-quanping") {
          this.iconFull = "iconfont icon-quxiaoquanping"
          this.isFull = true
        } else if (this.iconFull == "iconfont icon-quxiaoquanping") {
          this.iconFull = "iconfont icon-quanping"
          this.isFull = false
        }
        if (this.screenfull.enabled) {
          this.screenfull.toggle(this.$refs.mapScreenfull);

        }
      },
      getHotMap(){

        let _this = this

        _this.map = new BMap.Map("mapContainer", {
          enableMapClick: false,
          minZoom: 10,
          maxZoom: 19
        });          // 创建地图实例


        _this.map.setMapStyle({
          styleJson: [
            {
              "featureType": "poilabel",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            },
            {
              "featureType": "manmade",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            },
            {
              "featureType": "building",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            }
          ]
        });

        _this.map.centerAndZoom(new BMap.Point(114.1173442697, 22.7412900656), 11);             // 初始化地图，设置中心点坐标和地图级别
        _this.map.enableScrollWheelZoom(); // 允许滚轮缩放

        _this.map.addControl(new BMap.OverviewMapControl());
        _this.map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
        this.map.addControl( new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));

        /* _this.addMarkes(_this.siteInfo, 1)
         _this.addMarkes(_this.railInfo, 0)*/

      },
      addMarkes(dataInnfo, key){
        let _this = this
        for (var i = 0; i < dataInnfo.length; i++) {
          //设置marker图标为水滴
          if (key == 0) {//围栏
            if (dataInnfo[i].position && dataInnfo[i].position.length > 2) {
              var arr = []
              dataInnfo[i].position.forEach((item) => {
                arr.push(new BMap.Point(item.lng, item.lat))
              })
              vectorMarker = new BMap.Polygon(arr, {
                strokeColor: "#EF0000",    //边线颜色。
                fillColor: "#E0AA98",      //填充颜色。当参数为空时，圆形将没有填充效果。
                strokeWeight: 1,       //边线的宽度，以像素为单位。
                strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
                fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
                strokeStyle: 'solid' //边线的样式，solid或dashed。
              });  //创建多边形

            }

          } else if (key == 1) {//站点
            var vectorMarker = new BMap.Marker(new BMap.Point(dataInnfo[i].lng, dataInnfo[i].lat), {
              // 指定Marker的icon属性为Symbol
              icon: new BMap.Icon(`./static/images/Intelligent.png`, new BMap.Size(34, 18)
              )
            });
          }

          _this.map.addOverlay(vectorMarker);
          _this.addClickHandler(vectorMarker, dataInnfo[i], key);
        }
      },
      addClickHandler (disName) {
        let point = this.map.getCenter();

        let content, name = disName + "车辆详情"
        //创建检索信息窗口对象
        this.searchInfoWindow = null;

        content = '<div class="mapTopWrap" style="border-bottom:1px solid #EFEEF3;"> <div class="mapBaseTitle" style="">街道车辆</div> <div style="float: left;line-height: 20px;border-left: 1px solid #EFEEF3; "> <div style="padding: 0 10px;color: #50545D;">粤海街道：' + 8879 + '</div> <div style="padding: 0 10px;color: #50545D;">西丽街道：3548</div> <div style="padding: 0 10px;color: #50545D;">桃园街道：6546</div> </div> </div> <div class="mapTopWrap"> <div class="mapBaseTitle" >企业车辆</div> <div style="float: left;line-height: 20px;border-left: 1px solid #EFEEF3; "> <div style="padding: 0 10px;color: #50545D;">摩拜：220</div> <div style="padding: 0 10px;color: #50545D;">OFO：130</div> <div style="padding: 0 10px;color: #50545D;">青桔：90</div> </div> </div>'

        this.searchInfoWindow = new BMapLib.SearchInfoWindow(this.map, content, {
          title: name,      //标题
//              width  : 80,             //宽度
//              height : 60,              //高度
          panel: "panel",         //检索结果面板
          enableAutoPan: true,     //自动平移
          offset: new BMap.Size(-20, -20),
          searchTypes: [
            /*BMAPLIB_TAB_SEARCH,   //周边检索
             BMAPLIB_TAB_TO_HERE,  //到这里去
             BMAPLIB_TAB_FROM_HERE //从这里出发*/
          ]
        });
        this.marker = new BMap.Marker(point); //创建marker对象
        this.searchInfoWindow.open(this.marker)

      }

    },
    watch: {

    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .homeMapWrapFirst
    width: 100%;
    margin 0 auto;
    &:hover .infoButtonFirst
      opacity: 1 !important;
    .containerWrap
      height: 100%;
      width: 100%;
      padding 10px
      box-sizing border-box
      margin 0px auto;
      position: relative;
      .companyInfoSty
        font-size: 14px;
        color: #3975FE;
        font-weight: bold;
        margin-left: 11px;
        margin-right: 15px;
        line-height: 24px;
        vertical-align: middle;
      .changeCompanyWrap
        height 20px
        font-size: 16px;
        color: #6A6FFC;
        position: absolute;
        bottom: 10px;
        left: 0px;
        width 100%
        line-height 35px
        height 35px
        vertical-align middle
        background-color rgba(255, 255, 255, 0.8)
        text-align center
        z-index 5
        .el-radio-button
          .el-radio-button__inner
            border-radius 10px
            padding 5px 15px
        .is-active
          .el-radio-button__inner
            background-color: #3975FE
            border-radius 10px
            border-color #3975FE
      .infoButtonFirst
        height 20px
        font-size: 16px;
        color: #6A6FFC;
        position: absolute;
        top: 15px;
        right: 15px;
        z-index 5
        opacity: 0;
        .iconfont
          display: inline-block;
          font-size: 18px;
          cursor pointer
      .colorWrapRack
        position: absolute;
        left 10px;
        top: 10px;
        line-height 22px
        padding 10px
        border-radius 5px
        z-index: 5;
        color: black;
        background-color rgba(255, 255, 255, 0.8)
        .colorlist
          display: inline-block;
          width: 21px;
          height 13px;
        .labelStyle
          font-size: 12px;
          color: #50545D;
          float: right;
          margin-left: 10px;
      #mapContainer
        height: 100%;
        width: 100%;
    .BMap_scaleCtrl
      bottom 40px !important
    .mapTopWrap
      background-color: white;
      overflow: hidden;
      min-height 90px;
      width 200px
      .mapBaseTitle
        color: #3975FE;
        font-size: 12px;
        writing-mode: vertical-lr;
        letter-spacing: 5px;
        float: left;
        padding: 11px;

    .BMapLib_SearchInfoWindow
      height 220px !important
      &::after
        content: ""
        position: absolute;
        background-color: white;
        width: 150px;
        height: 3px;
        bottom: 0px;
        left: 50px;
        z-index 100

    .BMapLib_bubble_title {
      padding-left: 14px !important;
      font-size: 14px !important;
      font-weight: bold !important;
      background-color white
      border-radius 10px !important
      /*display none !important*/
    }

    .BMapLib_bubble_top, .BMapLib_bubble_close {
      border-radius 10px !important
      border none !important
      background-color #f9f9f9 !important
    }

    #BMapLib_SearchInfoWindow0, .BMapLib_SearchInfoWindow {
      border-radius 10px !important
      width 210px !important
      min-width 210px !important
      box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.34) !important
      border none
    }

    .BMapLib_SearchInfoWindow .BMapLib_bubble_center {
      position absolute
      left 0
      top 20px
    }

    .BMapLib_bubble_content {
      min-height 100px !important
    }

</style>
